<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- Vue视数据的原理:
		1。vue会监视data中所有层次的数据
		2。如何监测对象中的数据?
			通过setter实现监视，且要在new Vue时就传入要监测的数据。
			(1).对象中后追加的属性，Vue默认不做响应式处理
			(2).如需给后添加的属性做响应式，请使用如下API:
			Vue.set(target，propertyName/index， value) 或vm.$set(target，propertyName/index， value)
		3。如何监测数组中的数据?
			通过包裹数组更新元素的方法实现，本质就是做了两件事:
			(1).调用原生对应的方法对数组进行更新。
			(2).重新解析模板，进而更新页面。A
		3。如何监测数组中的数据?
			通过也裹数组更新元素的方法实现，本质就是做了两件事:
			(1)。调用原生对应的方法对数组进行更新。
			(2).重新解析模板，进而更新页面。
		4.在Vue修改数组中的某个元素一定要用如下方法:
			1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
			2.Vue.set() 或 vm.$set()
			特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!! -->
		<div id="app">
			<button @click="student.age++">年龄+1</button>
			<button @click="addxb">添加性别属性：男</button>
			<button @click="student.xb='女'">修改性别</button>
			<button @click="addfr">在列表首位添加一个朋友</button>
			<button @click="student.friends[0].name='绵密'">修改第一个朋友名字为："绵密"</button>
			<button @click="student.hobby.push('打篮球')">添加一个爱好</button>
			<button @click="student.hobby.splice(0,1,'开车')">修改第一个爱好：开车</button>
			<div>0
				<p>姓名：{{student.name}}-年龄：{{student.age}} 性别：{{student.xb}}</p>
				<h1>爱好：</h1>
				<li v-for="(item,index) in student.hobby" :key="index">{{item}}</li>
				<h1>朋友</h1>
				<ul>
					<li v-for="(item,index) in student.friends" :key="index">姓名：{{item.name}}-年龄：{{item.age}}</li>
				</ul>
			</div>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						student: {
							name: '威威',
							age: 45,
							hobby: ['抽烟', '喝酒', '烫头'],
							friends: [{
									name: '强强',
									age: 65
								},
								{
									name: '猜猜',
									age: 47
								}
							]
						}
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {
					addxb() {
						this.$set(this.student, 'xb', '男')
					},
					addfr() {
						let fri = {
							name: '看看',
							age: 33
						}
						this.student.friends.unshift(fri)
					}
				},
				//计算属性 定义:要用的属性不存在，要通过已有属性计算得来
				computed: {},
				//监视属性 当被监视的属性变化时，回调函数自动调用
				watch: {}
			});
		</script>
	</body>
</html>
